<!DOCTYPE html>
<html>
<head>
  <meta http-equiv=Content-type content="text/html; charset=utf-8">
  <title>Snack API Documentation</title>
  <link rel="stylesheet" href="styles.css" media="screen">
</head>
<body>
<div id=content>

<div id=header>
  <input type=search id=terms>
  <ul id=links>
    <li><a href="/demos/jsonp/">jsonp demo</a></li>
    <li><a href="/demos/tabs/">tabs demo</a></li>
    <li><a href="snack.tar.gz">download</a></li>
    <li><a href="https://github.com/rpflorence/snack">github repository</a></li>
  </ul>
</div>

<ul id=nav>
  <li><h2><a href="#core">core</a></h2>
    <ul>
      <li><a href="#Object.create">Object.create</a>
      <li><a href="#snack.extend">snack.extend</a>
      <li><a href="#snack.bind">snack.bind</a>
      <li><a href="#snack.punch">snack.punch</a></li>
      <li><a href="#snack.create">snack.create</a></li>
      <li><a href="#snack.id">snack.id</a>
      <li><a href="#snack.each">snack.each</a>
      <li><a href="#snack.parseJSON">snack.parseJSON</a>
      <li><a href="#snack.isArray">snack.isArray</a>
      <li><a href="#snack.indexOf">snack.indexOf</a>
    </ul>
  </li>

  <li><h2><a href="#wrap">wrap</a></h2>
    <ul>
      <li><a href="#snack.wrap">snack.wrap</a>
        <ul>
          <li><a href="#wrap.each">wrap.each</a>
          <li><a href="#wrap.addClass">wrap.addClass</a>
          <li><a href="#wrap.removeClass">wrap.removeClass</a>
          <li><a href="#wrap.attach">wrap.attach</a>
          <li><a href="#wrap.detach">wrap.detach</a>
          <li><a href="#wrap.fire">wrap.fire</a>
          <li><a href="#wrap.data">wrap.data</a></li>
        </ul>
      </li>
      <li><a href="#snack.wrap.define">snack.wrap.define</a>
      <li><a href="#snack.wrap.defineEngine">snack.wrap.defineEngine</a>
    </ul>
  </li>

  <li><h2><a href="#event">event</a></h2>
    <ul>
      <li><a href="#snack.ready">snack.ready</a>
      <li><a href="#snack.listener">snack.listener</a>
        <ul>
          <li><a href="#listener.attach">listener.attach</a>
          <li><a href="#listener.detach">listener.detach</a>
          <li><a href="#listener.fire">listener.fire</a>
        </ul>
      </li>
      <li><a href="#snack.preventDefault">snack.preventDefault</a></li>
      <li><a href="#snack.stopPropagation">snack.stopPropagation</a></li>
    </ul>
  </li>

  <li><h2><a href="#publisher">publisher</a></h2>
    <ul>
      <li><a href="#snack.publisher">snack.publisher</a>
        <ul>
          <li><a href="#publisher.publish">publisher.publish</a>
          <li><a href="#publisher.subscribe">publisher.subscribe</a>
            <ul>
              <li><a href="#subscription.attach">subscription.attach</a>
              <li><a href="#subscription.detach">subscription.detach</a>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>

  <li><h2><a href="#ajax">ajax</a></h2>
    <ul>
      <li><a href="#snack.toQueryString">snack.toQueryString</a>
      <li><a href="#snack.JSONP">snack.JSONP</a>
        <ul>
          <li><a href="#JSONP.send">JSONP.send</a>
          <li><a href="#JSONP.cancel">JSONP.cancel</a>
        </ul>
      </li>
      <li><a href="#snack.request">snack.request</a>
        <ul>
          <li><a href="#request.send">request.send</a>
          <li><a href="#request.cancel">request.cancel</a>
        </ul>
      </li>
    </ul>
  </li>
</ul>











<div id=docs>
<section id=about>
<h2 id=about-snack><a href="#about-snack">About Snack</a></h2>
<h1 id=snack>Snack API Documentation</h1>
<h3>Because sometimes, all you need is a snack.</h3>
<p>
  Snack is a small and simple JavaScript library.  Though ideal for small projects, it's got enough in it to build complex, cross-browser web apps. Visit the <a href="https://github.com/rpflorence/snack">github repository</a> for more information.
</p>
<p>
  This documentation is released under the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons - Attribution-NonCommercial-ShareAlike license.</a> 
</p>
</section>






<section id=core>
<h1><a href="#core">core</a></h1>





<h2 id=Object.create><a href="#Object.create">Object.create</a></h2>
<p>Creates a new object with a defined prototype.  Helpful for prototypal inheritance and object templating.</p>
<h3>Signature</h3>
<pre class=sig><code>Object.create(obj)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>obj</code> (<b>object</b>) - The object to be used as the new object's prototype
</ol>
<h3>Returns</h3>
<p><b>Object</b> - A new object</p>
<h3>Examples</h3>
<pre><code>var dad = {
  cash: 'tons',
  init: function (name){
    this.name = name
  }
}

dad.init('Casey')
dad.name //> 'Casey'

var son = Object.create(dad)
son.name //> 'Casey'

son.init('Ryan')
son.name //> 'Ryan'

dad.cash //> 'tons'
son.cash //> 'tons' ... yes!

dad.cash = 'none'
son.cash //> 'none' ... hey, what the?!

// because dad is the prototype of son, it inherits dad's values
</code></pre>





<h3>Notes</h3>
<p>
  <code>Object.create</code> is part of the <a href="http://www.ecmascript.org/docs/tc39-2009-043.pdf">ES5</a> spec.
  This method is only implemented if it does not already exist in the environment.  This implementation, however,
  <b>does not support the second argument</b> of the native <code>Object.create</code> method.
</p>
<p>Implementation taken from <a href="http://javascript.crockford.com/prototypal.html">Douglas Crockford's original version</a></p>
<p>See also: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">MDC <code>Object.create</code></a></p>





<h2 id=snack.extend><a href="#snack.extend">snack.extend</a></h2>
<p>Performs a shallow merge of two or more objects into the first.
<h3>Signature</h3>
<pre class=sig><code>snack.extend(target [, obj1 [, objN]])
snack.extend(obj)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>target</code> (<b>object</b>) - The target object to receive the properties of subsequent objects.</li>
  <li><code>obj1</code> (<b>object</b>) - An object containing properties to merge into the target</li>
  <li><code>objN</code> (<b>object</b>) - Additional object to merge into the target</li>
  <li><code>obj</code> (<b>object</b>) - If only one object is provided, the target becomes the <code>snack</code> namespace, and the object is merged into it</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - The target object</p>
<h3>Examples</h3>
<p><i>Extend an object</i></p>
<pre><code>var coords = {
  x: 1,
  y: 1
}

snack.extend(coords, {
  translateY: function (amt){
    this.y += amt
  },
  translateX: function (amt){
    this.x += amt
  }
})

coords.translateY(10);
coords.y //> 11
</code></pre>
<p><i>Set options (typical of plugins)</i></p>
<pre><code>var defaults = {
  foo: 1,
  bar: 'baz'
}

function init (options){
  var settings = snack.extend({}, defaults, options)
  // `options` overwrites `defaults`
  // and that is added to the empty {} object
  // which becomes `settings`, a brand new object baby
}

function badInit (options){
  options = snack.extend(defaults, options)
  // bad for this use case because defaults is overwritten
  // and next time it will contain everything in options :(
}
</code></pre>

<p><i>Extend <code>snack</code></i></p>
<pre><code>snack.extend({
  awesome: true
})

snack.awesome //> true, you know it
</code></pre>





<h2 id=snack.bind><a href="#snack.bind">snack.bind</a></h2>
<p>Binds the context of a function (<code>this</code>) to an object.</p>

<h3>Signature</h3>
<pre class=sig><code>snack.bind(fn [, context [, args]])</code></pre>

<h3>Arguments</h3>
<ol>
  <li><code>fn</code> (<b>function</b>) - The function to bind the context to.</li>
  <li><code>context</code> (<b>object</b>) - The object to become the context of the function.</li>
  <li><code>args</code> (<b>array</b>: optional) - An array of arguments to prepend to the existing arguments of the function.</li>
</ol>

<h3>Returns</h3>
<p><b>Function</b> - The bound function.</p>

<h3>Examples</h3>
<p><i>Binding handlers to object methods</i></p>
<pre><code>var widget = {
  node: document.getElementById('some-el'),

  init: function (){
    this.listener = snack.listener(
      {node: this.node},
      snack.bind(this.handler, this, ['foo', 'bar']) // here!
    )
  },

  handler: function (foo, bar, event){
    // `this` is `widget`, instead of `node` (default context)
    // foo and bar are added before event
  }
}
</code></pre>




<h2 id=snack.punch><a href="#snack.punch">snack.punch</a></h2>
<p>Mutates an object method with new logic (Duck punching).</p>

<h3>Signature</h3>
<pre class=sig><code>snack.punch(obj, method, fn [, auto])</code></pre>

<h3>Arguments</h3>
<ol>
  <li><code>obj</code> (<b>object</b>) - The object who's method is getting punched.</li>
  <li><code>method</code> (<b>string</b>) - The name of the object's method.</li>
  <li>
    <code>fn</code> (<b>function</b>) - The new function.
    <p><b>Signature</b></p>
    <pre class=sig><code>function ([old [, argN]])</code></pre>
    <p><b>Arguments</b></p>
    <ol>
      <li><code>old</code> (<b>function</b>) - The old version of the method, (with context already bound to the object). <b>Note:</b> This argument is passed by default, if the <code>auto</code> argument is used then this argument will not be passed</li>
      <li><code>argN</code> (<b>mixed</b>) - Any arguments passed when the method is called.</li>
    </ol>
  </li>
  <li><code>auto</code> (<b>boolean</b>: optional, defaults to false) - If true, will automatically call the old method before calling the new one.</li>
</ol>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>var widget = {
  a: 0,
  b: 0,
  add: function (amt){
    this.a += amt
  }
}

widget.add(1)
widget.a //> 1
widget.b //> 0

snack.punch(widget, 'add', function (old, amt){
  // old is the old version of this method, already bound to widget
  // call it wherever you want inside of here
  old(amt)
  this.b += amt
})

widget.add(1)
widget.a //> 2
widget.b //> 1

snack.punch(widget, 'add', function (){
  // the last arg (`auto`) is `true`, so old will be called before
  // this stuff happens.  Effectively the same as calling `old`
  // on the first line of this new function.
  console.log("I'm adding stuff!")
}, true)

widget.add(1) // console logs "I'm adding stuff!"
widget.a //> 3
widget.b //> 2

snack.punch(widget, 'add', function (old){
  return this.a + this.b
  // since `auto` is not true, and old is not called
  // this method has been completely overwritten
})

var res = widget.add()
res //> 5
widget.a //> 3 ... unchanged
widget.b //> 2 ... unchanged</code></pre>

<h3>Notes</h3>
<p>When using the <code>auto</code> argument, this is extremely similar to <code>dojo.connect</code> (minus the DOM events).  It's also not unlike <code>Extends</code> and <code>this.parent</code> in a MooTools class.  Think of the <code>old</code> argument as <code>this.parent</code>.</p>





<h2 id=snack.create><a href="#snack.create">snack.create</a></h2>
<p>Similar to <a href=#Object.create>Object.create</a>, except it allows for an extension object to merge into the new object. When methods are redefined in the extension object, they are automatically <a href="#snack.punch">punched</a> providing a reference to the old (or parent) method.  Useful for object templating and prototypal inheritance.</p>

<h3>Signature</h3>
<pre class=sig><code>snack.create(proto [, ext])</code></pre>

<h3>Arguments</h3>
<ol>
  <li><code>proto</code> (<b>object</b>) - The object use as the prototype.</li>
  <li><code>ext</code> (<b>object</b>: optional) - An object to merge into the new object. <b>Note:</b> if a method is redefined then it will be automatically <a href="#snack.punch"><code>punched</code></a>, providing as the first argument of the method the old method.  Please see the examples.</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - A new object with <code>proto</code> as its prototype and <code>ext</code> merged into it.</p>
<h3>Examples</h3>
<pre><code>// create a generic object
var point = {
  coords: {
    x: 0,
    y: 0
  },

  translate: function (x, y){
    this.coords.x += x
    this.coords.y += y
  },

  sum: function (){
    var sum = 0
    snack.each(this.coords, function(key, value){
      sum += value
    })
    return sum
  }
}

// create a generic object that inherits from the other
var point3d = snack.create(point, {
  // new property
  z: 0,
  // redefined method
  translate: function (old, x, y, z){
    // if a method exists in the prototype object
    // then the method here is automatically punched
    // providing the old method as the first argument
    old()
    this.coords.z += z
  }
})

// create objects that inherit from the generic objects (instances, if you will)
var p = snack.create(point)
p.translate(5,10)
p.coords.x //> 5
p.coords.y //> 10
p.sum() //> 15
p.__proto__ === point //> true

var p3d = snack.create(point3d)
p3d.translate(1,2,3) // punched method, note that the signature does not
                     // include the `old` argument when being called
p.coords //> {x: 1, y: 2, z: 3}
p.sum() //> 6, inherited
p3d.__proto__ === point3d //> true
</code></pre>



<h2 id=snack.id><a href="#snack.id">snack.id</a></h2>
<p>Generates an incrementing global unique identifier</p>
<h3>Signature</h3>
<pre class=sig><code>snack.id()</code></pre>
<h3>Returns</h3>
<p><b>Number</b> - A unique number</p>
<h3>Examples</h3>
<pre><code>snack.id() //> 1
snack.id() //> 2
</code></pre>





<h2 id=snack.each><a href="#snack.each">snack.each</a></h2>
<p>Iterates over objects, arrays, and array-like objects.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.each(obj, fn [, context])</code></pre>

<h3>Arguments</h3>
<ol>
  <li><code>obj</code> (<b>mixed</b>) - Accepts an object, array, or array-like object.</li>
  <li>
    <code>fn</code> (<b>function</b>) - The function to call for each property or element.
    <p><b>Signature</b></p>
<pre class=sig><code>function (item, index, arr) // arrays
function (value, key, obj) // objects</code></pre>
    <p><b>Arguments</b></p>
    <ol>
      <li><code>item</code>, <code>value</code> (<b>mixed</b>) - The current array item or object property's value.</li>
      <li><code>index</code>, <code>key</code> (<b>mixed</b>) - The current array index or object property name.</li>
      <li><code>arr</code>, <code>obj</code> (<b>mixed</b>) - The array or object.</li>
    </ol>
  </li>
  <li><code>context</code> (<b>object</b>: optional) - Context of the <code>fn</code>.</li>
</ol>

<h3>Returns</h3>
<p><b>Mixed</b> - The <code>obj</code> argument.</p>
<h3>Examples</h3>
<p><i>Arrays</i></p>
<pre><code>var total = 0
snack.each([1,2,3], function (number){
  total += number
})
total //> 6
</code></pre>
  <p><i>Objects</i></p>
<pre><code>var numbers = {
  one: 1,
  two: 2,
  three: 3,
  total: null
}
snack.each(numbers, function (value, key){
  if (key == 'total')
    return
  numbers.total += value
})
numbers.total //> 6
</code></pre>
    <p><i>Array-like objects</i></p>
<pre><code>var fakeArray = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}
var total = 0
snack.each(fakeArray, function (number){
  total += number
})
total //> 6
</code></pre>
<h3>Notes</h3>
<p>If you're coming from jQuery, the signature for <code>snack.each</code> is reversed, and the context is not set to the item, following the native <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/array/foreach">Array.prototype.forEach</a></code> spec.</p>





<h2 id=snack.parseJSON><a href="#snack.parseJSON">snack.parseJSON</a></h2>
<h3>Signature</h3>
<pre class=sig><code>snack.parseJSON(json)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>json</code> (<b>json string</b>) - A well-formed JSON string.</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - The parsed JavaScript object</p>
<h3>Examples</h3>
<p><i>An XHR request with a JSON response</i></p>
<pre><code>snack.request({url: '/tags/1'}, function (err, json){
  // json = '{"name":"foo", "_id":"4b5783300334000000000aa9"}'
  var data = snack.parseJSON(json)
  data.name //> foo
  data._id //> 4b5783300334000000000aa9
})
</code></pre>
<h3>Notes</h3>
<p>Code adapted from <a href="http://api.jquery.com/jQuery.parseJSON/">jQuery.parseJSON()</a>.</p>





<h2 id=snack.isArray><a href="#snack.isArray">snack.isArray</a></h2>
<p>Determines if an object is an array.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.isArray(obj)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>obj</code> (<b>mixed</b>) - The object to check</li>
</ol>
<h3>Returns</h3>
<p><b>Boolean</b> - True if the object is an array, false otherwise.</p>
<h3>Examples</h3>
<pre><code>snack.isArray([1,2,3]) //> true
snack.isArray('') //> false
snack.isArray({}) //> false
</code></pre>
<h3>Notes</h3>
<p><code>typeof</code> returns 'object' for arrays, making this method useful.</p>





<h2 id=snack.indexOf><a href="#snack.indexOf">snack.indexOf</a></h2>
<p>Cross-browser indexOf method to determine the index of an item in an array (or array-like object)</p>
<h3>Signature</h3>
<pre class=sig><code>snack.indexOf(item, array)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>item</code> (<b>mixed</b>) - The array element for which to search.</li>
  <li><code>array</code> (<b>array</b>) - The array to search.</li>
</ol>
<h3>Returns</h3>
<p><b>Number</b> - If found, returns the index, otherwise returns <code>-1</code></p>
<h3>Examples</h3>
<p><i>Typical use</i></p>
<pre><code>var arr = [1, 2, 3]
snack.indexOf(2, arr) //> 1
snack.indexOf(4, arr) //> -1
</code></pre>
<p><i>Extend the array prototype, if you're hard-core</i></p>
<pre><code>if (![].indexOf){
  Array.prototype.indexOf = function (item){
    return snack.indexOf(item, this)
  }
}
[1,2,3].indexOf(1) //> 0
</code></pre>
<h3>Notes</h3>
<p>If the browser supports <code>Array.prototype.indexOf</code>, the native method is used.</p>
</section>






<section id=wrap>
<h1><a href="#wrap">wrap</a></h1>
<h2 id=snack.wrap><a href="#snack.wrap">snack.wrap</a></h2>
<p>Wraps DOM elements into an array-like object with element based prototype methods.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.wrap(nodes)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>nodes</code> (<b>mixed</b>) - Accepts one or many DOM elements or a CSS selector string.</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> <code>wrap</code> - An array-like object with useful element methods</p>
<h3>Examples</h3>
<pre><code>var divs     = snack.wrap('div.find_me') // CSS Selector
  , elements = snack.wrap(document.getElementsByTagName('div'))
  , d00d     = snack.wrap(document.getElementById('dude'))

divs[0]     //> first element in `divs`
elements[1] //> second element in `elements`, etc.
</code></pre>
<h3>Notes</h3>
<ul>
  <li>The CSS Selector you pass in to <code>snack.wrap</code> <b>must be supported by the selector engine you're using</b>.</li>
  <li><code>snack</code> allows you to define the selector engine you want to use. <code>querySelectorAll</code> is the default selector engine, supported by IE8+, and the real browsers.</li>
  <li>If you need to support IE &lt; 8 you should use one of the builds that includes a selector engine: qwery, slick, or sizzle.  Alternatively, you can still select elements with <code>getElementById</code>, <code>getElementsByTagName</code> etc. and pass them in as the <code>nodes</code> argument. A selector engine is not required.</li>
  <li>When Qwery matures, it is the suggested selector engine because its goals are similar to Snack's and results in a smaller file size.  However, Qwery is still quite young, so if your code doesn't work in oldIE, try using a different selector engine before thinking it's snack's fault :D</li>
</ul>





<h2 id=wrap.each><a href="#wrap.each">wrap.each</a></h2>
<p>Iterates over a collection of wrapped elements.</p>
<h3>Signature</h3>
<pre class=sig><code>wrap.each(fn, context)</code></pre>
<h3>Arguments</h3>
<ol>
  <li>
    <code>fn</code> (<b>function</b>) - The function to call for each element.
    <p><b>Signature</b></p>
<pre class=sig><code>function (item, index, wrap)</code></pre>
    <p><b>Arguments</b></p>
    <ol>
      <li><code>item</code> (<b>element</b>) - The current (unwrapped) DOM element.</li>
      <li><code>index</code> (<b>number</b>) - The current array index or object property name.</li>
      <li><code>wrap</code> (<code>obj</code>) - The wrap object.</li>
    </ol>
  </li>
  <li><code>context</code> (<b>object</b>: optional) - Context of the <code>fn</code>.</li>
</ol>

<h3>Returns</h3>
<p><b>Object</b> <code>wrap</code></p>
<h3>Examples</h3>
<pre><code>snack.wrap('div').each(function (element, index){
  var params = {node: element, event: 'click'}
  snack.listener(params, function (){
    alert(index)
  })
})
</code></pre>
<h3>Notes</h3>
<p>If you're coming from jQuery, the signature for <code>wrap.each</code> is reversed, and the context is not set to the item, following the native <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/array/foreach">Array.prototype.forEach</a></code> spec.</p>



<h2 id=wrap.addClass><a href="#wrap.addClass">wrap.addClass</a></h2>
<p>Adds a CSS class name from each element in the wrap.</p>
<h3>Signature</h3>
<pre class=sig><code>wrap.addClass(className)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>className</code> (<b>string</b>) - A CSS class name, accepts multiple.</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - <code>wrap</code></p>
<h3>Examples</h3>
<pre><code>snack.wrap('div').addClass('foo')
snack.wrap('a').addClass('bar baz') // can add multiple at once
</code></pre>





<h2 id=wrap.removeClass><a href="#wrap.removeClass">wrap.removeClass</a></h2>
<p>Removes a CSS class from each element in the wrap.</p>
<h3>Signature</h3>
<pre class=sig><code>wrap.removeClass(className)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>className</code> (<b>string</b>) - A single class name to remove.</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - <code>wrap</code></p>
<h3>Examples</h3>
<pre><code>var wrap = snack.wrap('div')
wrap.addClass('foo')

// later
wrap.removeClass('foo')

// put it back on the first element
snack.wrap(elements[0]).addClass('foo')
</code></pre>





<h2 id=wrap.attach><a href="#wrap.attach">wrap.attach</a></h2>
<p>Attaches an event handler to each element in the wrap.</p>
<h3>Signature</h3>
<pre class=sig><code>wrap.attach(event, handler)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>event</code> (<b>string</b>) - The event handler to add, i.e. 'click'</li>
  <li><code>handler</code> (<b>function</b>) - The event handler.</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - <code>wrap</code></p>
<h3>Examples</h3>
<pre><code>var wrap = snack.wrap('#some-el')
wrap.attach('click', function (){
  // do something
})
</code></pre>





<h2 id=wrap.detach><a href="#wrap.detach">wrap.detach</a></h2>
<p>Detaches any event handlers added with a namespace from each element in the wrap.</p>
<h3>Signature</h3>
<pre class=sig><code>wrap.detach(namespace)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>namespace</code> (<b>string</b>) - The namespace of events.</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - <code>wrap</code></p>
<h3>Examples</h3>
<pre><code>var wrap = snack.wrap('#some-el')
wrap.attach('click.foo', function (event){
  // do something
})
wrap.attach('mouseover.foo', function (event){
    // do something else
})

// later
wrap.detach('foo') // removes both listeners
</code></pre>





<h2 id=wrap.fire><a href="#wrap.fire">wrap.fire</a></h2>
<p>Fires any event handlers added with a namespace for each element in the wrap.</p>
<h3>Signature</h3>
<pre class=sig><code>wrap.fire(namespace)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>namespace</code> (<b>string</b>) - The namespace of events.</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - <code>wrap</code></p>
<h3>Examples</h3>
<pre><code>var wrap = snack.wrap('#some-el')
wrap.attach('click.foo', function (event){
  // do something
})
wrap.attach('mouseover.foo', function (event){
  // do something else
})

wrap.fire('foo') // fires both listeners
</code></pre>





<h2 id=wrap.data><a href="#wrap.data">wrap.data</a></h2>
<p>Stores any JavaScript data with a specific wrapper.</p>
<h3>Signature</h3>
<pre class=sig><code>wrap.data(key [, value])</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>key</code> (<b>string</b>) - The key to store the data on.</li>
  <li><code>value</code> (<b>mixed</b>) - Any type of data to store.  If omitted, the data will be set.</li>
</ol>
<h3>Returns</h3>
<p><b>Mixed</b> - The <code>value</code> argument, whether used as a getter or setter.</p>
<h3>Examples</h3>
<p><i>Single element data</i></p>
<pre><code>var wrap = snack.wrap('#some-el')
wrap.data('height', wrap[0].scrollHeight) //> returns the scrollHeight, let's say 100

// later
wrap.data('height') //> 100
</code></pre>
<p><i>Multiple element data</i></p>
<pre><code>var wrap = snack.wrap('.some_els')

var heights = []
wrap.each(function (node){
  heights.push(node.scrollHeight)
})
wrap.data('heights', heights)

// in some other method outside the `heights` scope
// (otherwise, you wouldn't need data)
var heights = wrap.data('heights')
wrap.each(function (node, index){
  heights[index] //> the node's `scrollHeight`
})
</code></pre>
<h3>Notes</h3>
<p>This is not as useful as MooTools or jQuery's element storage since it belongs to a wrapper rather than an element, but it's still pretty useful.</p>







<h2 id=snack.wrap.define><a href="#snack.wrap.define">snack.wrap.define</a></h2>
<p>Defines a prototype method for <code>wrap</code>s created with <code><a href="#snack.wrap">snack.wrap</a></code></p>
<h3>Signature</h3>
<pre class=sig><code>snack.wrap.define(name, fn)
snack.wrap.define(methodsObject)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>name</code> (<b>string</b>) - The method name.</li>
  <li><code>fn</code> (<b>function</b>) - The method function.</li>
  <li><code>methodsObject</code> (<b>object</b>) - Object of <code>name:fn</code> pairs.</li>
</ol>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<p><i>Define a single method</i></p>
<pre><code>snack.wrap.define('makeRed', function (){
  return this.each(function (element){
    element.style.color = 'red'
  })
})

var wrap = snack.wrap('div')
wrap.makeRed()
</code></pre>
<p><i>Define multiple methods</i></p>
<pre><code>snack.wrap.define({
  hide: function (){
    return this.each(function (element){
      element.style.display = 'none'
    })
  },
  show: function (){
    return this.each(function (element){
      element.style.display = ''
    })
  }
})

els.hide()
els.show()
</code></pre>
<h3>Notes</h3>
<ul>
  <li>This is similar to using jQuery's <code>jQuery.fn = function (){}</code> or MooTools <code>Element.implement(method, fn)</code>.</li>
  <li>The context of the defined method is a <code><a href="#snack.wrap"></a>wrap</code> object.</li>
  <li>Returning <code>this</code> or a method that returns <code>this</code> allows you to chain these methods together for a potentially miserable, but often pleasant API.</li>
</ul>





<h2 id=snack.wrap.defineEngine><a href="#snack.wrap.defineEngine">snack.wrap.defineEngine</a></h2>
<p>Defines a selector engine for <code><a href="#snack.wrap">snack.wrap</a></code> to use.  The default engine is <code>querySelectorAll</code></p>
<h3>Signature</h3>
<pre class=sig><code>snack.wrap.defineEngine(fn)</code></pre>
<h3>Arguments</h3>
<ol>
  <li>
    <code>fn</code> (<b>function</b>) - A function that returns an element collection.
    <p><b>Signature</b></p>
<pre class=sig><code>function (selector, context)</code></pre>
    <p><b>Arguments</b></p>
    <ol>
      <li><code>selector</code> (<b>string</b>) - A CSS selector string.</li>
      <li><code>context</code> (<b>mixed</b>) - A DOM element or CSS selector string used as the context of the query.</li>
    </ol>
    <p><b>Returns</b></p>
    <p>Must return an element collection.</p>
  </li>
</ol>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>// Use qwery
snack.wrap.defineEngine(function (selector, context){
  return qwery(selector, context);
})

// Use Slick
snack.wrap.defineEngine(function (selector, context){
  if (typeof context === 'string')
    context = Slick.search(document, context)[0]
  return Slick.search(context || document, selector)
})

// Use Sizzle
snack.wrap.defineEngine(function (selector, context){
  if (typeof context === 'string')
    context = Sizzle(context)[0]
  return Sizzle(selector, context)
})

// Or do everything by id
snack.wrap.defineEngine(function (selector, context){
  if (typeof context === 'string')
    context = document.getElementById(context)
  return [(context || document).getElementById(selector)] // return an array
})

</code></pre>
<h3>Notes</h3>
</section>





<section id=event>
<h1><a href="#event">event</a></h1>
<h2 id=snack.ready><a href="#snack.ready">snack.ready</a></h2>
<p>Cross-browser DOMContentLoaded function.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.ready(handler)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>handler</code> (<b>function</b>) - The function to call when the dom is ready.</li>
</ol>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>snack.ready(function (){
  // do something
})
</code></pre>
<h3>Notes</h3>
<p>Adapted from Diego Perini's <a href="http://javascript.nwbox.com/ContentLoaded/"><code>contentLoaded</code> function.</a></p>





<h2 id=snack.listener><a href="#snack.listener">snack.listener</a></h2>
<p>Cross-browser DOM event listener.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.listener(params, handler)</code></pre>
<h3>Arguments</h3>
<ol>
  <li>
    <code>params</code> (<b>object</b>) - Key value pairs of parameters for the listener.
    <ul>
      <li><code>node</code> (<b>element</b>) - A DOM element to attach the listener to.</li>
      <li><code>event</code> (<b>string</b>) - Which event to listen to, i.e. 'click'.</li>
      <li><code>capture</code> (<b>boolean</b>: default <code>false</code>) - Initiates capture. See http://www.w3.org/TR/DOM-Level-3-Events/#event-flow</li>
      <li>
        <code>delegate</code> (<b>mixed</b>) - Accepts a CSS selector or a function
        <p><b>Signature</b></p>
<pre class=sig><code>function (node)</code></pre>
        <p><b>Arguments</b></p>
        <ol>
          <li><code>node</code> (<b>element</b>) - The element the event is listening on</li>
        </ol>
        <p><b>Returns</b> Array - You must return an element collection, or array of elements you want to be matched against the event.</p>
      </li>
    </ul>
  </li>
  <li><code>handler</code> (<b>function</b>) - The event handler.</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - A <a href="#listener.attach"><code>listener</code></a> object.</p>
<h3>Examples</h3>
<p><i>A basic click listener</i></p>
<pre><code>var params = {
  node: document.getElementById('foo'),
  event: 'click'
}
snack.listener(params, function (){
  alert('hey!')
})
</code></pre>
<p><i>Delegate with function</i></p>
<pre><code>var params = {
  node: document.getElementById('foo'),
  event: 'click',
  delegate: function (node){
    // return a collection of elements
    // only buttons will fire the handler
    return node.getElementsByTagName('button')
  }
}

snack.listener(params, function (){
  alert('hey!')
})
</code></pre>
<p><i>Delegate with CSS selector</i></p>
<pre><code>snack.listener({
  node: document.getElementById('foo'),
  event: 'click',
  delegate: 'button' // same as above but uses the selector engine
}, function (){
  alert('hey!')
})
</code></pre>
<h3>Notes</h3>
<p>See also <a href="#wrap.attach">wrap.attach</a>.</p>




<h2 id=listener.attach><a href="#listener.attach">listener.attach</a></h2>
<p>Attaches the listener to the element (automatically called in <a href="#snack.listener">snack.listener</a>).</p>
<h3>Signature</h3>
<pre class=sig><code>listener.attach()</code></pre>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>var listener = snack.listener({
  node: document.getElementById('foo'),
  event: 'click'
}, function (){
  alert('hey!')
})

listener.detach()
// click does nothing

listener.attach()
// click is attached again
</code></pre>




<h2 id=listener.detach><a href="#listener.detach">listener.detach</a></h2>
<p>Detaches the listener from the element.</p>
<h3>Signature</h3>
<pre class=sig><code>listener.detach()</code></pre>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>var listener = snack.listener({
  node: document.getElementById('foo'),
  event: 'click'
}, function (){
  alert('hey!')
})

listener.detach()
// click does nothing

listener.attach()
// click is attached again
</code></pre>





<h2 id=listener.fire><a href="#listener.fire">listener.fire</a></h2>
<p>Fires the handler of a listener.</p>
<h3>Signature</h3>
<pre class=sig><code>listener.fire([arg1, [argN]])</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>arg1</code> (<b>mixed</b>: optional) - An argument to be passed to the handler, often a mock event object should be supplied.</li>
  <li><code>argN</code> (<b>mixed</b>: optional) - Any number of arguments passed in will be applied to the handler.</li>
</ol>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>var listener = snack.listener({
  node: document.getElementById('foo'),
  event: 'keyup'
}, function (event){
  event.keyCode //> 'fake'
})

listener.fire({keyCode: 'fake'})
</code></pre>




<h2 id=snack.preventDefault><a href="#snack.preventDefault">snack.preventDefault</a></h2>
<p>Cross-browser method to cancel an event without stopping further propagation of the event.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.preventDefault(event)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>event</code> (<b>event</b>) - A DOM event object</li>
</ol>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>snack.listener({
  event: 'click',
  node: document.getElementById('foo')
}, function (event){
  snack.preventDefault(event) // cancels event
})
</code></pre>
<h3>Notes</h3>
<p>See <a href="https://developer.mozilla.org/en/DOM/event.preventDefault">MDC event.preventDefault</a></p>




<h2 id=snack.stopPropagation><a href="#snack.stopPropagation">snack.stopPropagation</a></h2>
<p>Cross-browser method to prevent bubbling (propagation) of an event.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.stopPropagation(event)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>event</code> (<b>event</b>) - A DOM event object</li>
</ol>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>snack.listener({
  event: 'click',
  node: document.getElementById('foo')
}, function (event){
  snack.stopPropagation(event) // prevents bubbling
})
</code></pre>
<h3>Notes</h3>
<p>See <a href="https://developer.mozilla.org/en/DOM/event.stopPropagation">MDC event.stopPropagation</a></p>
</section>






<section id=publisher>
<h1><a href="#publisher">publisher</a></h1>
<h2 id=snack.publisher><a href="#snack.publisher">snack.publisher</a></h2>
<p>Turns any object into a "publisher", extending it with <code><a href="#publisher.publish">publish</a></code> and <code><a href="#publisher.subscribe">subscribe</a></code> methods, or creates a new generic publisher.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.publisher([obj])</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>obj</code> (<b>Object</b>: optional) - The object to make a "publisher".  If undefined, a generic publisher will be created.</li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - The <code>obj</code> supplied or a new publisher object.</p>
<h3>Examples</h3>
<p><i>Creating a generic publisher</i></p>
<pre><code>var pubsub = snack.publisher()
  , c = 1

pubsub.subscribe('foo', function (amt){
  c += amt
})

pubsub.publish('foo', [10])
c //> 11
</code></pre>

<p><i>Extending an existing object</i></p>
<pre><code>var coords = {
  x: 1,
  y: 1,
  translateY: function (amt){
    this.y += amt
    this.publish('translateY', [amt, this.y]) // publish the event
  },
  translateX: function (amt){
    this.x += amt
    this.publish('translateX', [amt, this.x]) // publish the event
  }
}

snack.publisher(coords) // turn coords into a publisher

var subscription = coords.subscribe('translateY', function (amt, y){
  console.log(amt, y)
})

coords.translateY(10) // console logs 10, 11
</code></pre>




<h2 id=publisher.publish><a href="#publisher.publish">publisher.publish</a></h2>
<p>Publishes an event with arguments, calling all subscription handlers.</p>
<h3>Signature</h3>
<pre class=sig><code>publisher.publish(channel, argsArray)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>channel</code> (<b>string</b>) - The channel to publish.</li>
  <li><code>argsArray</code> (<b>array</b>) - An array of arguments to apply to the subscription handlers.</li>
</ol>
<h3>Returns</h3>
<p><b>Number</b> - The number of subscription handlers called.</p>
<h3>Examples</h3>
<pre><code>var megaphone = snack.publisher()

megaphone.subscribe('foo', function (data){
  console.log(data.awesome)
})

pubsub.subscribe('foo', function (data){
  console.log(data.lame)
})

snack.JSONP({url: '/items'}, function (data){
  var fired = megaphone.publish('jsonp/success', [data])
  fired //> 2, since we added two subscriptions
        // console logs data.awesome, data.lame, from the subscriptions above
})
</code></pre>




<h2 id=publisher.subscribe><a href="#publisher.subscribe">publisher.subscribe</a></h2>
<p>Adds a new subscription (event handler) to a <a href="#snack.publisher">publisher object</a>.</p>
<h3>Signature</h3>
<pre class=sig><code>publisher.subscribe(channel, handler [, context])</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>channel</code> (<b>string</b>) - The channel to subscribe to.</li>
  <li><code>handler</code> (<b>function</b>) - The handler to call when the channel is published.  Arguments applied by the call to <code><a href="#publisher.publish">publish</a></code></li>
  <li><code>context</code> (<b>object</b>: optional) - The context of <code>handler</code></li>
</ol>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>var el = snack.wrap('#element')
  , el2 = snack.wrap('#el2')
  , pubsub = snack.publisher()

pubsub.subscribe('foo', function (){
  console.log(this) //> el
}, el)

pubsub.subscribe('foo', function (){
  console.log(this) // el2
}, el2)

pubsub.publish('foo')
</code></pre>
<h3>Notes</h3>





<h2 id=subscription.attach><a href="#subscription.attach">subscription.attach</a></h2>
<p>Attaches the subscription handler, to be called when published.  Called automatically in <code><a href="#publisher.subscribe">publisher.subscribe</a></code></p>
<h3>Signature</h3>
<pre class=sig><code>subscription.attach()</code></pre>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>var publisher = snack.publisher()
  , subscription = publisher.subscribe('foo', function (){
      console.log('hey there')
    })

subscription.detach()
publisher.publish('foo') // nothing happens

subscription.attach()
publisher.publish('foo') // stuff happens
</code></pre>




<h2 id=subscription.detach><a href="#subscription.detach">subscription.detach</a></h2>
<p>Detaches the subscription handler, preventing it from being called.</p>
<h3>Signature</h3>
<pre class=sig><code>subscription.detach()</code></pre>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>var publisher = snack.publisher()
  , subscription = publisher.subscribe('foo', function (){
      console.log('hey there')
    })

subscription.detach()
publisher.publish('foo') // nothing happens

subscription.attach()
publisher.publish('foo') // stuff happens
</code></pre>
</section>






<section id=ajax>
<h1><a href="#ajax">ajax</a></h1>
<h2 id=snack.toQueryString><a href="#snack.toQueryString">snack.toQueryString</a></h2>
<p>Converts an object of key value pairs to a URI query string.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.toQueryString(obj)</code></pre>
<h3>Arguments</h3>
<ol>
  <li><code>obj</code> (<b>Object</b>) - Key value pairs</li>
</ol>
<h3>Returns</h3>
<p><b>String</b> - A URI query string</p>
<h3>Examples</h3>
<pre><code>var str = snack.toQueryString({
  foo: 'bar',
  baz: 'quux'
})

str //> 'foo=bar&baz=quux'
</code></pre>




<h2 id=snack.JSONP><a href="#snack.JSONP">snack.JSONP</a></h2>
<p>Requests JSON data with script tag injection and handles the callback.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.JSONP(params, callback)</code></pre>
<h3>Arguments</h3>
<ol>
  <li>
    <code>params</code> (<b>object</b>)
    <ul>
      <li><code>url</code> (<b>string</b>) - The url to request.</li>
      <li><code>key</code> (<b>string</b>) - The callback key used by the remote server.</li>
      <li><code>data</code> (<b>mixed</b>) - Object of key value pairs or a URI query string to append to the request.</li>
      <li><code>now</code> (<b>boolean</b>: optional, defaults to <code>true</code>) - If false, will not send request upon object creation, otherwise the request is made immediately.</li>
    </ul>
  </li>
  <li>
    <code>callback</code> (<b>function</b>) - The function to call when the request is complete.
    <p><b>Signature</b></p>
<pre class=sig><code>function (data)</code></pre>
    <p><b>Arguments</b></p>
    <ol>
      <li><code>data</code> (<b>object</b>) - The JSON data requested.</li>
    </ol>
  </li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - A new JSONP object.</p>
<h3>Examples</h3>
<pre><code>var params = {
  url: 'https://ajax.googleapis.com/ajax/services/search/news',
  key: 'callback',
  data: { q: 'LDS General Conference', v: '1.0', rsz: 8 }
}

snack.JSONP(params, function (data){
  console.log(data) // news!
})
</code></pre>
<h3>Notes</h3>
<p>
  JSONP (JSON with Padding) is a technique used to make a JSON request to a server (same-domain or not).  It's nothing more than simply injecting a <code>&lt;script&gt;</code> tag that calls a function in your page with the sole argument being the JSON data.
</p>
<p>The <code>key</code> param tells the server what function with which to pad the JSON.  So if the <code>key</code> were <code>jsoncallback</code> then the script src will look something like <code>http://example.com/?jsoncallback=someFunction</code>, and the server will send a script file that looks something like:
</p>
<pre><code>someFunction({"the":"JSON Data"})
</code></pre>
<p>
  <code>snack.JSONP</code> handles the <code>someFunction</code> part for you, all you have to do is provide the right callback key that the remote server accepts.
</p>




<h2 id=JSONP.send><a href="#JSONP.send">JSONP.send</a></h2>
<p>Sends the JSONP request.</p>
<h3>Signature</h3>
<pre class=sig><code>JSONP.send()</code></pre>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>var JSONP = snack.JSONP({
  url: 'http://www.flickr.com/services/feeds/photos_public.gne',
  key: 'jsoncallback',
  data: { tags: tags, format: 'json', cacheBust: new Date().getTime() },
  now: false // won't send
}, function (data){
  // do something with data
})

JSONP.send()
</code></pre>




<h2 id=JSONP.cancel><a href="#JSONP.cancel">JSONP.cancel</a></h2>
<p>Cancels a running JSONP request.</p>
<h3>Signature</h3>
<pre class=sig><code>JSONP.cancel()</code></pre>
<h3>Returns</h3>
<p><b>Undefined</b></p>
<h3>Examples</h3>
<pre><code>var JSONP = snack.JSONP({
  url: 'http://www.flickr.com/services/feeds/photos_public.gne',
  key: 'jsoncallback',
  data: { tags: tags, format: 'json', cacheBust: new Date().getTime() },
  now: false // won't send
}, function (data){
  // do something with data
})

$('input').attach('keyup', function (){
  JSONP.cancel()
  JSONP.send()
})
</code></pre>
<h3>Notes</h3>
<p>Some browsers will request the script no matter how quickly you cancel the request.  However, this method is still effective at preventing the <code>callback</code> from being called.</p>



<h2 id=snack.request><a href="#snack.request">snack.request</a></h2>
<p>Creates a flexible, cross-browser XHR (AJAX) object.</p>
<h3>Signature</h3>
<pre class=sig><code>snack.request(options, callback)</code></pre>
<h3>Arguments</h3>
<ol>
  <li>
    <code>params</code> (<b>object</b>)
    <ul>
      <li><code>url</code> (<b>string</b>) - The url to request</li>
      <li><code>data</code> (<b>mixed</b>: optional) - A URI query string or object of key value pairs.</li>
      <li><code>method</code> (<b>string</b>: default <code>get</code>) - Accepts <code>get</code>, <code>post</code>, <code>put</code>, and <code>delete</code>.</li>
      <li><code>now</code> (<b>boolean</b>: default <code>true</code>) - If false, will not send request upon object creation; otherwise sends immediately.</li>
      <li><code>headers</code> (<b>object</b>: optional) - Allows setting custom headers.</li>
      <li><code>async</code> (<b>boolean</b>: default <code>true</code>) - If false, will send synchronous request.</li>
      <li><code>emulation</code> (<b>boolean</b>: default <code>true</code>) - Allows the use of <code>put</code> and <code>delete</code> methods for servers that understand it (express, rails), sent as <code>data._method</code>.</li>
      <li><code>urlEncoded</code> (<b>boolean</b>: default <code>true</code>) - Sets content-type header to www-form-urlencoded + encoding.</li>
      <li><code>encoding</code> (<b>string</b>: default <code>'utf-8'</code>) - Request header encoding.</li>
    </ul>
  </li>
  <li>
    <code>callback</code> (<b>function</b>) - The function to call when the request is complete.
    <p><b>Signature</b></p>
<pre><code>function (error, response)
</code></pre>
    <p><b>Arguments</b></p>
    <ol>
      <li><code>error</code> (<b>mixed</b>) - The response error code, i.e. <code>500</code> or <code>false</code> if success.</li>
      <li><code>response</code> (<b>string</b>) - The response text.</li>
    </ol>
  </li>
</ol>
<h3>Returns</h3>
<p><b>Object</b> - A <code>snack.request</code> object.</p>
<h3>Examples</h3>
<pre><code>var options = {
  method: 'post',
  url: '/items',
  data: {
    title: 'Awesome Sauce'
    body: 'This is the best sauce ever, put it on your burgers.'
  }
}

snack.request(options, function (err, res){
  // check for an error
  if (err) {
    alert('Bah! ' + err + ' error!')
    return
  }

  // no error, do what you like
  alert('Item saved')

  // handle the response data
  var item = snack.parseJSON(res)
})
</code></pre>





<h2 id=request.send><a href="#request.send">request.send</a></h2>
<p>Makes the XHR request.  Automatically called upon object creation unless <code>now</code> option is <code>false</code></p>
<h3>Signature</h3>
<pre class=sig><code>request.send()</code></pre>
<h3>Returns</h3>
<p><b>Object</b> - the <code><a href="#snack.request">snack.request</a></code> object.</p>
<h3>Examples</h3>
<pre><code>var container = $('#container')

var req = snack.request({
  now: false, // don't send upon creation
  url: 'items/23'
}, function (err, res){
  if (err){
    alert('Crap!')
    return
  }

  container[0].innerHTML = res
})

button.attach('click', function (){
  // cancel so the container doesn't update w/ the wrong data
  req.cancel()

  // send the request
  req.send()
})
</code></pre>





<h2 id=request.cancel><a href="#request.cancel">request.cancel</a></h2>
<p>Cancels a running XHR request.</p>
<h3>Signature</h3>
<pre class=sig><code>request.cancel()</code></pre>
<h3>Returns</h3>
<p><b>Object</b> - the <code><a href="#snack.request">snack.request</a></code> object.</p>
<h3>Examples</h3>
<p><i>Same example as <code><a href="#request.send">request.send</a></code></i></p>
<pre><code>var container = snack.wrap('#container')

var req = snack.request({
  now: false, // don't send upon creation
  url: 'items/23'
}, function (err, res){
  if (err){
    alert('Crap!')
    return
  }

  container[0].innerHTML = res
})

snack.wrap('#button').attach('click', function (){
  // cancel so the container doesn't update w/ the wrong data
  req.cancel()

  // send the request
  req.send()
})
</code></pre>
</section>

</div><!-- /docs -->
</div><!-- /content -->

<script src="js/hijs.js"></script>
<script src="../builds/snack-min.js"></script>
<script src="js/docs.js"></script>
</body>
</html>
